<template>
  <div class="fml-login">
    <div class="md-modal modal-msg md-modal-transition">
      <div class="md-modal-inner">
        <div class="md-top">
          <div class="md-title">用户登录</div>
        </div>
        <div class="md-content">
          <div class="confirm-tips">
            <el-form :model="fmlForm">
              <ul>
                <li class="regi_form_input">
                  <el-input
                    clearable
                    placeholder="用户名"
                    class="fml-code"
                    auto-complete="off"
                    v-model="fmlForm.userCode"
                  >
                    <i slot="prefix" class="icon el-icon-tickets"></i>
                  </el-input>
                </li>
                <li class="regi_form_input">
                  <el-input
                    clearable
                    placeholder="密码"
                    class="fml-code"
                    auto-complete="off"
                    v-model="fmlForm.password"
                  >
                    <i slot="prefix" class="icon el-icon-view"></i>
                  </el-input>
                </li>
              </ul>
            </el-form>
          </div>
          <div class="login-wrap">
            <el-button
              type="warning"
              v-loading.fullscreen.lock="isLogining"
              element-loading-text="登录初始化过程中...."
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
              class="btn-login"
              @click.native="loginHandle"
            >{{ this.isLogining ? '登录中' : '登 录' }}</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-company-info">
      <div>Copyright 2019 ©浙江广锐信息科技有限公司</div>
      <span>Version 1.0</span>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data(){
    return{
      isLogining:false,
      fmlForm:{
        userCode:'',
        password:''
      }
    }
  },
  methods:{
    async loginHandle(){
      this.isLogining=true
       let param = {
        username: this.fmlForm.userCode,
        password: this.fmlForm.password,
        loginType: 3,
        json:1
      };
      let [err,res]=await this.$fetchService.fetchGet(param,'login',false)
      if(err){
        this.isLogining=false
        return this.$message.error(err.message || "登录失败")
      }
      this.$router.push('/?Authentication='+res.data.sessionId)
    }
  }
})
</script>
<style scoped>
.fml-login {
  background: url("../assets/images/index.png") no-repeat;
  background-size: 100% 100%;
  position: fixed;
  width: 100%;
  height: 100%;
}
.regi_form_input {
  position: relative;
  height: 45px;
  line-height: 45px;
  background: none;
  margin-bottom: 15px;
  font-size: 14px;
  overflow: hidden;
  padding-bottom: 0;
  border-radius: 4px;
}
.regi_form_input .icon {
  font-size: 20px;
  margin: 13px 0 0 4px;
}

.login-wrap {
  border-radius: 4px;
  width: 400px;
  margin: 30px auto 0 auto;
}

.md-content .btn-login {
  display: block;
  width: 100%;
  color: #fff;
  font-size: 18px;
  text-align: center;
  border-radius: 4px;
}
.md-modal {
  position: fixed;
  top: 45%;
  left: 50%;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 201;
  width: 470px;
  height: 320px;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 10px;
}

.md-top {
  text-align: center;
  padding: 20px 0;
}

.md-modal .md-modal-inner {
  width: 450px;
  height: 300px;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  margin: 0 auto;
  position: relative;
  top: 10px;
}

.md-modal .confirm-tips {
  width: 400px;
  margin: 0 auto;
  font-size: 14px;
  font-weight: 200;
  text-align: center;
}
.md-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
}
.bottom-company-info {
  position: absolute;
  bottom: 70px;
  text-align: center;
  font-size: 12px;
  color: #fff;
  width: 100%;
}
</style>


